<template>
  <el-dialog
    :visible.sync="dialog"
    :close-on-click-modal="false"
    :title="sheetColumnDialogTitle"
    append-to-body
    top="1"
    width="60%"
    @close="doClose"
  >
    <div class="app-container">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item name="1">
          <template slot="title">
            <i class="el-icon-search" />搜索栏
          </template>
          <div class="head-container">
            <el-form class="searchform" :model="param" :inline="true" size="mini" label-width="auto" @keyup.enter.native="toQuery">
              <el-form-item label="表单名称:">
                <el-select v-model="sheetVariableName" disabled style="width: 150px;" size="mini">
                  <el-option v-for="item in parent.sheetNames" :key="item.value" :label="item.name" :value="item.value" clearable />
                </el-select>
              </el-form-item>
              <div />
              <el-form-item label="Excel列号:">
                <el-input v-model="param.columnIndex" placeholder="输入列号" clearable style="width: 150px;" />
              </el-form-item>
              <el-form-item label="Excel列名:">
                <el-input v-model="param.columnName" placeholder="输入列名" clearable style="width: 150px;" />
              </el-form-item>
              <el-form-item>
                <el-button size="mini" style="float:right;margin-left:0px;" type="primary" icon="el-icon-refresh" round @click="resetForm">重置</el-button>
                <el-button size="mini" style="float:right;margin-left:0px;" type="primary" icon="el-icon-search" round @click="toQuery">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-collapse-item>
      </el-collapse>
      <div style="padding-top:5px">
        <el-table
          ref="sheetColumnListTabel"
          :data="data"
          :row-key="getRowKeys"
          stripe
          :height="tableHeight"
          size="small"
          border
          style="width: 100%;"
          @row-click="rowClick"
          @select="select"
          @row-dblclick="doSave"
          @select-all="handleSelectionChange"
          @header-dragend="colChange"
        >
          <el-table-column :reserve-selection="true" type="selection" align="center" width="55" fixed="left" />
          <el-table-column :show-overflow-tooltip="true" label="ID" prop="id" width="85" fixed="left" />
          <el-table-column :show-overflow-tooltip="true" label="表单名称" prop="sheetName" :width="colWidths.sheetName" />
          <el-table-column :show-overflow-tooltip="true" label="Excel列号" prop="columnIndex" :width="colWidths.columnIndex" />
          <el-table-column :show-overflow-tooltip="true" label="Excel列名" prop="columnName" :width="colWidths.columnName" />
        </el-table>
        <!--分页组件-->
        <el-pagination
          :total="total"
          :current-page.sync="currentPage"
          style="margin-top: 8px;"
          layout="total, prev, pager, next, sizes"
          @size-change="sizeChange"
          @current-change="pageChange"
        />
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="1" :offset="9"><div><el-button type="primary" size="small" round @click="doClose()">取消</el-button></div></el-col>
      <el-col :span="1" :offset="3"><div><el-button type="primary" size="small" round @click="doSave()">确定</el-button></div></el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import initData from '@/api/rule3InitData'
import { Message } from 'element-ui'

export default {
  mixins: [initData],
  props: {
    parent: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      dialog: false,
      activeName: '1',
      sheetColumnDialogTitle: '',
      selectedRow: null,
      sheetVariableName: '',
      callbackMethod: '',
      ids: [],
      tableHeight: window.innerHeight * 0.58
    }
  },
  watch: {
    data: {
      handler(n, o) {
        this.$nextTick(() => {
          this.doLayout()
        })
      }
    }
  },
  mounted() {
    window.addEventListener('resize', this.doLayout, true)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.doLayout, true)
  },
  methods: {
    doLayout() {
      if (this.$refs.sheetColumnListTabel) {
        this.$refs.sheetColumnListTabel.doLayout()
      }
    },
    beforeInit() {
      this.url = '/rules/rule/sheet/column/findPage'
      this.param.pageNum = this.page
      this.param.pageSize = this.size
      this.param.sheetVariableName = this.sheetVariableName
      this.show = false
      return true
    },
    resetForm() {
      this.param = { columnIndex: '', columnName: '' }
    },
    toQuery() {
      this.page = 0
      this.currentPage = 1
      this.init()
      this.ids = []
      this.selectedRow = null
      this.$refs.sheetColumnListTabel.clearSelection(this.multipleSelection)
    },
    // 翻页选择row的key值
    getRowKeys(row) {
      return row.id
    },
    select(selection, row) {
      this.rowClick(row)
    },
    rowClick(row) {
      this.selectedRow = row
      this.$refs.sheetColumnListTabel.clearSelection(this.multipleSelection)
      this.$refs.sheetColumnListTabel.toggleRowSelection(row, true)
      this.ids = []
    },
    // 列表多选框触发
    handleSelectionChange(val) {
      this.ids = []
      val.forEach(item => {
        this.ids.push(item.id)
      })
      if (val.length === 1) {
        this.selectedRow = val[0]
      }
    },
    formatIs(row, column) {
      return row.isAllowCommit === '1' ? '是' : '否'
    },
    // 关闭
    doClose() {
      this.dialog = false
      this.selectedRow = null
      this.$refs.sheetColumnListTabel.clearSelection(this.multipleSelection)
      this.resetForm()
    },
    // 确定
    doSave() {
      var _this = this
      if (this.ids.length > 1) {
        Message({
          message: '不能多选!',
          type: 'warning',
          duration: 2 * 1000
        })
        return
      }
      if (this.selectedRow === null) {
        Message({
          message: '请选择表单列!',
          type: 'warning',
          duration: 2 * 1000
        })
      } else {
        if (this.callbackMethod !== null && this.callbackMethod !== '') {
          this.$emit(this.callbackMethod, this.selectedRow)
        }
        _this.dialog = false
        _this.selectedRow = null
        _this.$refs.sheetColumnListTabel.clearSelection(this.multipleSelection)
      }
    }
  }
}
</script>
